<template>
	<view class="time_km">
		<view class="time_km_item1">
			<i class="iconfont icon-shijian"></i>
			<text v-if='duration<3600'>{{Math.ceil(duration / 60)}}分钟</text>
			<text v-else>{{Math.floor(duration / 3600)}}小时{{Math.ceil(duration%3600/60)}}分钟</text>
		</view>
		<view class="time_km_item2">
			<i class="iconfont icon-Distance-"></i>
			<text v-if='distance<1000'>{{distance}}米</text>
			<text v-else>{{(distance / 1000).toFixed(1)}}公里</text>
		</view>
	</view>
</template>

<script>
	import '@/static/iconfont/iconfont.css'
	export default {
		data() {
			return {
				duration: 0,
				distance: 0
			}
		},
		
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.time_km {
		width: 100vw;
		height: 10vh;
		background-color: #ffffff;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 20rpx 0 20rpx;
	}

	.time_km_item1,
	.time_km_item2 {
		margin-top: 20rpx;
		//text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time_km_item1 {
		font-size: 32rpx;
		font-weight: bold;
	}

	.iconfont {
		margin-right: 10rpx;
		font-size: 36rpx;
	}
</style>
